<template>
    <div>
<!--        顶部-->
        <van-nav-bar
                title="我买到的"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
<!--        点单分类-->
        <van-tabs @click="orderTypeList">
            <van-tab v-for="index in orderType" :title="index">
                 <ul style="margin-left: 10px;">
                     <li v-for="item in orderList" style="list-style: none">
                      <div>
                          <div style="margin-top:5%;display: flex" @click="toMap">
                             <span>
                                  <van-image
                                          width="6rem"
                                          height="6rem"
                                          fit="contain"
                                          :src=item.orderNo
                                  />
                             </span>
                              <span>
                                 <ul style="margin-top: -10%;margin-left:-10%">
                                     <li >
                                        <h4> {{item.title}}</h4>
                                     </li>
                                     <li>
                                         <h4 style="color: red;margin-top: 2%">￥{{item.totalFee}}</h4>
                                     </li>
                                 </ul>
                              </span>
                              <span style="margin-top: 11%;display: flex">
                                <span style="margin-top: 15%;margin-left: 10%">
                                      <van-image
                                              round
                                              width="1.5rem"
                                              height="1.5rem"
                                              src="http://47.109.38.52:80/group1/M00/00/01/rBIu8WL8oiqAF6pQAAAD0XqnTy0863.png"
                                      />
                                </span>
                                  <span style="margin-left: -40%">
                                      <h4 style="margin-left: 0%;color: #FFCD43;font-size: 15px">{{item.orderStatus}}</h4>
                                  </span>
                              </span>
                          </div>

                      </div>
                     </li>
                 </ul>
            </van-tab>
        </van-tabs>
<!--没有更多-->
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
        </van-list>
        <!--      用来展示没有更多-->
        <div style="height: 50px"></div>
    </div>
</template>

<script>
    export default {
        name: "order",
        data(){
            return{
                //订单详情
                orderList:[],
                loading: false,
                finished: false,
                orderType:["全部","待付款","待发货","待收货","待评价","退款中"],
            }
        },
        methods:{
          //去物流地图
          toMap(){
            this.$router.push("/map");
          },
            orderTypeList(title){
             if(title==0){
                 this.getOrder();
             }else if(title==1){
                    this.axios({
                        method:"get",
                        url:"/order/getOderWei/"+this.$store.state.userinfo.user.user.id
                    }).then(resp=>{
                        this.orderList=resp.data.data.list
                    })
                }else  if(title==5){
                 this.axios({
                     method:"post",
                     url:"/order/getOderTui"
                 }).then(resp=>{
                     this.orderList=resp.data.data.list
                 })
             }else {
                 this.axios({
                     method:"get",
                     url:"/order/getOrderCheng/"+this.$store.state.userinfo.user.user.id
                 }).then(resp=>{
                     this.orderList=resp.data.data.list
                 })
             }

            },
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    this.finished = true;

                }, 100);
            },
            onClickLeft(){
                this.$router.push({name:'person'})
            },
            //订单数据
            getOrder(){
                this.axios({
                    method:"get",
                    url:"/order-info/list/"+this.$store.state.userinfo.user.user.id
                }).then(resp=>{
                    this.orderList=resp.data.data.list
                    console.log(this.orderList)
                })
            }
        },
        mounted() {
              //订单数据
            this.getOrder();
        }
    }
</script>

<style scoped>

</style>